<template>
  <div :class="['df-c',collapse?'logo-open':'logo-close','home-logo']">
    <img v-if="collapse" src="../assets/image/home/logo.png" alt="">
    <div v-else>
      <img style="width: 100%;height: 50px" src="../assets/image/home/logo_c.jpg" alt="">
    </div>
  </div> 
  <lay-scroll :style="{backgroundColor: 'transparent', thumbColor:'#cccccc',width:collapse?'200px':'60px'}">
    <lay-menu v-model:selected-key="selectedKey" v-model:tree="isTree" v-model:open-keys="openKeys6" :collapse="!collapse">

      <!-- {{ newMmenuList }} -->
      <div v-for="item in newMmenuList" :key="item.permissionId">
        <!-- 有子菜单 -->
        <lay-sub-menu :id="item.permissionId" v-if="item.children &&item.children.length>0" @change-selected-Key="changeSelectedKey" @change-open-keys="changeOpenKeys">
          <!-- <template v-slot:title>
            {{item.permissionName}}
          </template> -->

          <template #icon>
            <lay-icon :type="item.permissionIcon?item.permissionIcon:'layui-icon-home'"></lay-icon>
          </template>
          <template #title>
            {{item.permissionName}}
          </template>

          <lay-menu-item :id="ele.permissionId" v-for="ele in item.children" :key="ele.permissionId" @click="to_menu(item,ele)">

            {{ele.permissionName}}

          </lay-menu-item>
        </lay-sub-menu>

        <!-- 无子菜单 -->
        <lay-menu-item :id="item.permissionId" v-else @click="to_menu('',item)" class="no-child">
          <template #icon>
            <lay-icon type="layui-icon-home"></lay-icon>
          </template>
          <template #title>
            {{item.permissionName}}
            <!-- {{  item.permissionId}} -->
          </template>
        </lay-menu-item>
      </div>
    </lay-menu>
  </lay-scroll>
</template>

<script setup lang="ts">
import http from "@/http";
import { onMounted, ref } from "vue";
// import {  } from "@layui/icons-vue";
import { useCounterStore } from "@/current";
import { storeToRefs } from "pinia"; // cnpm i pinia --save  2.1.3
import { useRouter } from "vue-router";
const store = useCounterStore();
const { collapse, menuTab, menuList, newMmenuList, selectedKey, openKeys6, tabMenu } = storeToRefs(store); //  数据
const { get_menu_list, get_now_router } = store;

const router = useRouter();
// // 当前选中
// const selectedKey = ref("user");
// // 打开项
// const openKeys6 = ref(["0"]);

// 菜单折叠
// const collapse = ref(false);
const isTree = ref(true);

// const menuList = ref([]);
// 获取菜单
const get_list = async () => {
  await get_menu_list();
  // const res = await http.corsApi("/secPermission/treeSelectByResKey", "get", {});
  // console.log(res);
  // menuList.value = res.data[0].children;
  // menuList.value.unshift({
  //   children: [],
  //   key: "home",
  //   title: "首页",
  //   value: "home",
  // });
};

// 选中菜单回调
const changeSelectedKey = (val) => {
  selectedKey.value = val;
};

// 展开目录回调
const changeOpenKeys = (val) => {
  openKeys6.value = val;
};

const to_menu = (item, ele) => {
  console.log(item, ele);

  get_now_router(ele.permissionId);

  if (item === "") {
    router.push(`${ele.permissionUrl}`);
    push_tabMenu(ele);
    // tabMenu.value.push(ele);
    // menuTab.value.push({
    //   title: item.title,
    //   key: item.key,
    // });
  } else {
    // console.log(2);
    // console.log(menuTab.value);
    // menuTab.value.forEach((item) => {
    //   console.log(item);
    //   if (item.key !== ele.key) {
    //     // menuTab.value.push({
    //     //   title: ele.title,
    //     //   key: ele.key,
    //     // });
    //   }
    // });

    router.push(`${ele.permissionUrl}`);
    push_tabMenu(ele);
    // tabMenu.value.push(ele);
  }
};

const push_tabMenu = (ele) => {
  if (ele.permissionName == "首页") {
    return false;
  }

  if (tabMenu.value && tabMenu.value.length > 0) {
    let isData = tabMenu.value.filter((item) => item.permissionName === ele.permissionName);
    if (isData && isData.length <= 0) {
      tabMenu.value.push(ele);
    }
  } else {
    tabMenu.value.push(ele);
  }
};

// 页面初始化
onMounted(() => {
  get_list();
});
</script>

<style scoped lang="scss">
.layui-scroll {
  height: calc(100vh - 64px) !important;
}
.logo-open {
  height: 60px;
  font-size: 28px;
  /*     border-bottom: 1px solid #bbbbbb;  */
  box-sizing: border-box;
}
.logo-close {
  height: 60px;
  font-size: 16px;
  /*  border-bottom: 1px solid #bbbbbb; */
  box-sizing: border-box;
}
// .layui-nav {
//   .no-child :hover {
//     background-color: transparent;
//   }
// }

// .layui-nav-light {
//   background-color: transparent;
// }
</style> 

<style lang="scss">
:root {
  /* --global-primary-color: #16baaa; */
  /* --global-primary-color: linear-gradient(to right, #eafbf1, #ddf5fa); */
}
.home-logo {
  img {
    width: 160px;
    height: 50px;
  } 
}
</style> 